<template>
  <div>
    <!-- 底部部分 -->
    <footer class="footer">
      <span class="todo-count"><strong>{{ last }}</strong>剩余</span>
      <!-- 利用事件委托 -->
      <!-- 点击对应tab栏, 将type变量赋值, 并利用事件冒泡, 将值传给父组件, 父组件判断tpye值进行筛选数组 -->
      <ul class="filters" @click="$emit('handleTab', type)">
        <li>
          <a :class="{selected: type === 'all'}" @click="type = 'all'" href="#/">全部</a>
        </li>
        <li>
          <a :class="{selected: type === 'on'}" @click="type = 'on'" href="#/active">进行中</a>
        </li>
        <li>
          <a :class="{selected: type === 'done'}" @click="type = 'done'" href="#/completed">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" v-show="isShow" @click="$emit('clean')">清除已完成</button>
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      required: true,
      type: Array,
    }
  },
  data () {
    return {
      type: 'all',
    }
  },
  methods: {
    
  },
  // 定义计算属性
  computed: {
    // 数组some, 有一个已完成就显示, 否则就隐藏
    isShow() {
      return this.list.some(item => item.isDone)
    },
    // 统计剩余未完成的数据
    last() {
      return this.list.reduce((sum, item) => sum += !item.isDone ? 1 : 0, 0)
    }
  }
}
</script>

<style>

</style>